<template>
<div class="wrap">
  <div class="wrap-title">{{titleText}}</div>
  <div class="item">
    <div class="item-box border-bottom" v-for="item of recommendList" :key="item.id">
      <div class="item-box-img">
        <img :src="item.imgUrl" alt="">
      </div>
      <div class="item-box-desc">
        <div class="item-box-desc-title">{{item.title}}</div>
        <div class="item-box-desc-infor">{{item.desc}}</div>
        <router-link
          tag="button"
          class="item-box-desc-more"
          :to="'/detail/' + item.id"
        >
          {{more}}
        </router-link>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Recommend',
  props: {
    recommendList: Array
  },
  data () {
    return {
      titleText: '热门推荐',
      more: '点击了解'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/variables.styl'
.wrap
  .wrap-title
    font-size .28rem
    background-color #eee
    padding .2rem .12rem
  .item
    &-box
      display flex
      &-img
        width 2rem
        height 2rem
        padding .1rem
        img
          height 100%
      &-desc
        margin-left .2rem
        flex 1
        min-width 0
        &-title
          color #000
          font-size .30rem
          margin .4rem 0 .2rem 0
          ellipsis()
        &-infor
          color #777
          font-size .28rem
          ellipsis()
        &-more
          padding .06rem .2rem
          font-size .25rem
          color #fff
          background-color $bgcolor
          margin-top .2rem
          border-radius .08rem

</style>
